<template>
    <div id="Pie-chart" style="width: 100%;height: 100%;"></div>
</template>

<script setup lang = 'ts'>
import * as echarts from 'echarts'
import { onMounted, reactive, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { useMessage } from 'naive-ui';

type EChartsOption = echarts.EChartsOption;

// 引入路由
const router = useRouter()

// 引入消息函数
const message = useMessage()

// api访问代理
const { proxy } = getCurrentInstance() as any

//获取机构id
const id = router.currentRoute.value.params.id

onMounted(() => {
    initCharts()
})

const option: EChartsOption = reactive({
    title: {
        text: "Contribution (papers)"
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        bottom: '0%',
        left: 'center',
        data: [''],
    },
    series: [
        {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: ['35%', '65%'],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '25',
                    fontWeight: 'bold'
                }
            },
            data: []
        }
    ]
});

const initCharts = (() => {
    var chartDom = document.getElementById("Pie-chart")!;
    var myChart = echarts.init(chartDom);
    myChart.showLoading();

    proxy.$api.entity.getContribution({ id: id }).then((result: any) => {
        if (result.success) {
            myChart.hideLoading();
            (option.series as any)[0].data = result.data;
            findBiggest()
            option && myChart.setOption(option);
        } else {
            message.warning(result.msg)
        }
    }).catch(() => {
        message.error('未知错误')
    });

    myChart.on('click', (param) => {
        if ((param.data as any).id !== "-1" && (param.data as any).id !== "") {
            let router_data = router.resolve({ name: 'Author', params: { id: (param.data as any).id } })
            window.open(router_data.href, '_blank')
        }
    })
})

const findBiggest = (() => {
    var tmp = {
        id: "",
        name: "",
        value: ""
    };

    (option.series as any)[0].data.forEach((element: any) => {
        if (element.value >= tmp.value) {
            tmp = element
        }
    });

    (option.legend as any).data.push(tmp.name);
})

</script>

<style scoped>
</style>